<template>
	<view class="forget-box">
		<view class="forget-header">设置密码后需重新登录</view>
		<view class="forget-form">
			<!-- 手机号 -->
			<xh-form-input title="手机号" v-model="phone" keyboardType="digit" :maxCount="11" placeholder="请输入需找回的登录手机号" minWidth="150rpx"></xh-form-input>
			<!-- 新密码 -->
			<xh-form-input title="新密码" :maxCount="18" :password="true" v-model="password" minWidth="150rpx" placeholder="6~18位英文字母、数字组合"> </xh-form-input>
			<!-- 确认密码 -->
			<xh-form-input title="确认密码" :maxCount="18" :password="true" v-model="password" minWidth="150rpx" placeholder="请再次输入新的密码"> </xh-form-input>
			<!-- 验证码 -->
			<view class="code-box">
				<view class="code-title">验证码</view>
				<input class="form-input" type="digit" v-model="code" placeholder="请输入短信验证码" placeholder-style="font-size: 28rpx;" :maxlength="6" />
				<view class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="getCodeAction">
					{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}
				</view>
				<view class="form-line"></view>
			</view>
		</view>
		<!-- 底部提交按钮组件 -->
		<xh-submit style="padding-bottom: 30rpx;" title="确认修改" @btnClick="submitClick"></xh-submit>
		<view class="bottom-box">
			<text>短信验证码收不到？请致电</text>
			<text class="bottom-text" @tap="makeTel">{{CUSTOMSERVICE_TEL}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onUnload, onLoad } from '@dcloudio/uni-app'
	import { checkPhone, sendSmsCode, submitResetPassword } from '@/config/api.js'
	import CryptoTool from '@/utils/crypto/jscrypto.js'
	import { CUSTOMSERVICE_TEL } from '@/config/config.js'
	let timer = null
	//是否开始倒计时
	const isStartTime = ref(false)
	//手机号
	const phone = ref('')
	//新密码
	const password = ref('')
	//确认密码
	const surePassword = ref('')
	//验证码
	const code = ref('')
	//倒计时总秒数
	const seconds = ref(60)

	//获取验证码
	const getCodeAction = () => {
		if (isStartTime.value) {
			return
		}
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		}
		checkPhone({ 'phoneNumber': phone.value }).then((res) => {
			const status = res.result.status
			if (status != '1') {
				uni.$tools.showToast('该手机号未注册，请先注册')
			} else {
				///校验通过开始获取验证码
				startGetCode()
			}
		}).catch((error) => {})
	}
	//校验通过开始获取验证码
	const startGetCode = () => {
		sendSmsCode({ 'phoneNumber': phone.value, "smsType": "register" }).then((res) => {
			startDownTimer()
		}).catch((error) => {})
	}
	//开始倒计时
	const startDownTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = 60
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	//拨打电话
	const makeTel = () => {
		uni.makePhoneCall({
			phoneNumber:CUSTOMSERVICE_TEL
		})
	}
	// 确认修改
	const submitClick = () => {
		if (!uni.$u.test.mobile(phone.value)) {
			uni.$tools.showToast('请输入正确的手机号')
			return
		} else if (uni.$u.test.isEmpty(password.value)) {
			uni.$tools.showToast('请输入新密码')
			return
		} else if (!uni.$tools.checkPassword(password.value)) {
			uni.$tools.showToast('密码必须为6~18位英文字母+数字组合')
			return
		}
		else if (uni.$u.test.isEmpty(surePassword.value)) {
			uni.$tools.showToast('请再次输入新密码')
			return
		}
		else if (password.value != surePassword.value) {
			uni.$tools.showToast('两次输入的密码不一致')
			return
		}
		 else if (uni.$u.test.isEmpty(code.value)) {
			uni.$tools.showToast('请输入短信验证码')
			return
		}
		let params = {}
		params.smsCode = code.value
		params.phoneNumber = phone.value
		params.loginType = 6
		params.userPassword = CryptoTool.passwordEncrypt(password.value)
		params.confirmPassword = CryptoTool.passwordEncrypt(surePassword.value)
		submitResetPassword(params).then(res => {
			uni.$tools.showToast('密码重置成功')
			uni.navigateBack()
		}).catch(() => {})
	}
	//页面卸载了
	onUnload(() => {
		clearInterval(timer)
	})
</script>

<style lang="scss" scoped>
	.forget-box {
		padding-top: 30rpx;
		.forget-header{
			margin-bottom: 30rpx;
			color: $xh-subtitle-color;
			font-size: 28rpx;
			padding-left: 30rpx;
		}
		.forget-form {
			background-color: white;

			.agent-info-box {
				background-color: white;
				color: $xh-title-color;
				font-size: 28rpx;

				.agent-info-item {
					display: flex;
					align-items: center;
					height: 100rpx;
					position: relative;
					padding: 0 30rpx;

					.agent-info-item-title {
						min-width: 150rpx;
					}

					.agent-info-item-value {
						margin-left: 15rpx;
					}

					.agent-info-item-line {
						background-color: #D5D5D5;
						height: 1px;
						position: absolute;
						left: 30rpx;
						right: 0;
						bottom: 0;
						transform: scaleY(0.5);
					}
				}
			}

			.code-box {
				background-color: white;
				height: 100rpx;
				display: flex;
				align-items: center;
				color: $xh-title-color;
				position: relative;
				font-size: 28rpx;
				padding: 0 30rpx;

				.code-title {
					min-width: 190rpx;
				}

				.form-input {
					flex: 1;
				}

				.form-input-placeholder {
					color: #cccccc;
				}

				.form-line {
					background-color: #D5D5D5;
					height: 1px;
					position: absolute;
					left: 30rpx;
					right: 0;
					bottom: 0;
					transform: scaleY(0.5);
				}

				.code-btn {
					margin-left: auto;
					height: 72rpx;
					border-radius: 16rpx;
					line-height: 72rpx;
					text-align: center;
					color: white;
					color: $xh-blue-color;
				}

				.code-btn-select {
					color: #cccccc;
				}
			}
		}
		.bottom-box {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: $xh-subtitle-color;
			.bottom-text {
				color: $xh-blue-color;
				margin-left: 10rpx;
			}
		}
	}
</style>